<template>
	<view class="container">
		<div class="l-box flex-center">
			<view class="d-box flex-column" v-for="(item, i) in topData" :key="i"
				:class="{ line: i + 1 != topData.length }" @click="itemHandle(item)">
				<text class="num">{{ item.value }}</text>
				<text class="title">{{ item.title }}</text>
				<text class="sub">{{ item.sub }}</text>
			</view>
		</div>
		<view class="data-box">
			<view class="my item">
				<view class="title flex-space-between">
					<text class="left">直属代理商数（人） </text>
					<text class="right" @click="toDetail('today')">{{ underAgentDetai.length }}
						<text class="iconfont icon-Downarrow-R iconfont-right"></text></text>
				</view>
				<view class="content flex-column">
					<template v-if="underAgentDetai.length">
						<view class="todayNewAddList flex-space-between" v-for="(item, i) in underAgentDetai" :key="i">
							<text class="name">{{ item.agentName+'('+item.agentNo+')'
                }}<text v-if="item.agentNo == user.agentNo" class="iconfont icon-xiaoxi1 me"><text
										class="font">我</text></text></text>
							<text class="value">{{ item.count }}</text>
						</view>
					</template>
					<view class="nodata" v-else>暂无数据</view>
				</view>
			</view>
			<view class="team item">
				<view class="title flex-space-between">
					<text class="left">本月新增代理商数（人）
						<text @click="showTip('team')" class="iconfont icon-bangzhu"></text></text>
					<text class="right" @click="toDetail('underAgent')">{{ underAgentExtendDetail.length }}
						<text class="iconfont icon-Downarrow-R iconfont-right"></text></text>
				</view>
				<view class="content flex-column">
					<template v-if="underAgentExtendDetail.length">
						<view class="todayNewAddList flex-space-between" v-for="(item, i) in underAgentExtendDetail"
							:key="i">
							<text class="name">{{ item.agentName+'('+item.agentNo+')'
                }}<text v-if="item.agentNo == user.agentNo" class="iconfont icon-xiaoxi1 me"><text
										class="font">我</text></text></text>
							<text class="value">{{ item.count }}</text>
						</view>
					</template>
					<view class="nodata" v-else>暂无数据</view>
				</view>
			</view>
			<view class="team item">
				<view class="title flex-space-between">
					<text class="left">本月新增直属代理商数(人) </text>
					<text class="right" @click="toDetail('addUnderAgent')">{{ addUnderAgentDetai.length }}
						<text class="iconfont icon-Downarrow-R iconfont-right"></text></text>
				</view>
				<view class="content flex-column">
					<template v-if="addUnderAgentDetai.length">
						<view class="todayNewAddList flex-space-between" v-for="(item, i) in addUnderAgentDetai"
							:key="i">
							<text class="name">{{ item.agentName+'('+item.agentNo+')'
                }}<text v-if="item.agentNo == user.agentNo" class="iconfont icon-xiaoxi1 me"><text
										class="font">我</text></text></text>
							<text class="value">{{ item.count }}</text>
						</view>
					</template>
					<view class="nodata" v-else>暂无数据</view>
				</view>
			</view>
		</view>
		<view class="statistical">
			<view class="title">
				<text class="yuan"></text>
				直属团队统计维度
			</view>
			<div class="pai-list">
				<div class="c-nav">
					<div>团队名称</div>
					<div>交易量(元)</div>
					<div>激活数(台)</div>
					<div>商户数</div>
					<!-- <div>月台均(万元)</div> -->
				</div>
				<div class="c-item">
					<div class="item" v-for="(item, index) in underAgentTotalDetail" :key="index">
						<span>{{ item.agentName+'('+item.agentNo+')' }}</span>
						<span>{{ item.amount }}</span>
						<span>{{ item.activeTermCount }}</span>
						<span>{{ item.merchCount }}</span>
						<span>{{ item.monAveNum }}</span>
					</div>
				</div>
			</div>
		</view>
	</view>
</template>

<script>
	import {
		totalAgentIndex
	} from "_a/data/team";

	export default {
		data() {
			return {
				query: {
					policyCode: "",
				},
				topData: [{
						title: "今日新增代",
						value: 0,
						sub: "理商(人)",
						key: "addAgentCountByOneSelf",
					},
					{
						title: "今日新增直属",
						value: 0,
						sub: "代理商(人)",
						key: "addAgentCountByUnder",
					},
					{
						title: "团队数(人)",
						value: 0,
						sub: "",
						key: "agentCountByTeam"
					},
				],
				echartNavType: [{
						name: "直属团队",
						value: "0"
					},
					{
						name: "团队",
						value: "1"
					},
					{
						name: "本人",
						value: "2"
					},
				],
				timeType: [{
						name: "按日",
						value: "0"
					},
					{
						name: "按月",
						value: "1"
					},
					{
						name: "近一周",
						value: "2"
					},
				],
				navIndex1: 0,
				navIndex2: 0,
				timeActive1: 0, //时间下标
				timeActive2: 0, //时间下标
				underAgentDetai: [], //直属代理商明细
				addUnderAgentDetai: [], //本月代理商展业明细
				underAgentExtendDetail: [], //直属代理商明细
				tipText: "",
				underAgentTotalDetail: [],
			};
		},
		async onPullDownRefresh() {
			await this.initData();
			uni.stopPullDownRefresh();
			this.$tip.toast("刷新成功!", "success", 500);
		},

		onLoad() {
			this.initData();
		},
		computed: {
			user() {
				return this.$store.getters.user || {};
			},
		},
		methods: {
			async initData() {
				// this.ringData.series[0].data = [];
				await this.getTotal();
			},
			// 格式化请求赋值参数
			formData(list, data) {
				list = list.map((subItem) => {
					subItem.value = data[subItem.key];
					return subItem;
				});
				return list;
			},
			// 获取数据
			getTotal() {
				// 本人
				totalAgentIndex({
					// policyCode: this.query.policyCode,
				}).then((res) => {
					if (res.code == 200) {
						let data = res.data;
						this.topData = this.formData(this.topData, data);
						this.underAgentDetai = data.underAgentDetai;
						this.addUnderAgentDetai = data.addUnderAgentDetai;
						this.underAgentExtendDetail = data.underAgentExtendDetail;
						this.underAgentTotalDetail = data.underAgentTotalDetail;
					}
				});
			},
			changeNav(i) {
				switch (i) {
					case 1:
						this.navIndex1 = i;
						break;
					case 2:
						this.navIndex2 = i;
						break;
					default:
						break;
				}
			},
			timeChange(key, item, i) {
				switch (key) {
					case 1:
						this.timeActive1 = i;
						break;
					case 2:
						this.timeActive2 = i;
						break;
					default:
						break;
				}
			},
			// 提示
			showTip(type) {
				console.log(123);
				switch (type) {
					case "today":
						this.$tip.toast("该功能统计本人及直属下级团队数据的新增商户数");
						break;
					case "team":
						this.$tip.toast("该功能统计本人及直属下级团队数据的新增商户数");
						break;
					default:
						break;
				}
			},
			// 跳转全部
			toDetail(type) {
				let url = "";
				switch (type) {
					case "today":
						url = "/pages/home/myAgent/index";
						// url = "/pages/data/merch-detail";
						break;
					case "underAgent":
						url = "/pages/data/team-detail";
						break;
					case "addUnderAgent":
						url = "/pages/data/team-detail";
						break;
					default:
						break;
				}
				this.$nav.push({
					path: url,
					query: {
						type
					}
				});
			},
		},
	};
</script>

<style lang="scss">
	.container {
		padding-bottom: R(50);
	}

	.l-box {
		margin-bottom: R(26);
		justify-content: space-between;
		background: #4286f5;
		margin: R(30) R(25) R(20);
		box-shadow: 0px R(5) R(21) R(3) rgba(13, 133, 244, 0.14);
		border-radius: R(10);
		height: R(220);
		color: #fff;
		text-align: center;

		.d-box {
			width: 33%;
			text-align: center;
		}

		.num {
			font-size: R(36px);
			font-family: Source Han Sans CN;
			// font-weight: bold;
			margin-bottom: R(30);
		}

		.title {
			font-size: R(20px);
			font-family: Source Han Sans CN;
			font-weight: 400;
			margin-top: auto;
			white-space: nowrap;
		}

		.sub {
			@extend .title;
			height: R(30);
		}

		.line {
			position: relative;
		}

		.line::after {
			content: "";
			position: absolute;
			background: #eee;
			width: 1px;
			height: R(26);
			right: 0;
			top: R(40);
		}
	}

	.data-box {
		margin: R(0) R(25) 0;

		>view {
			margin-top: R(24);
			padding: R(24) R(22);
			background: #ffffff;
			border-radius: R(20px);
			box-shadow: 0px R(17px) R(16px) 0px rgba(11, 51, 116, 0.19);
		}

		.item {
			.title {
				align-items: center;
				margin-bottom: R(10);
			}

			.left {
				font-size: R(28);
			}

			.right {
				font-size: R(26);
			}

			.content {
				.name {
					.me {
						position: relative;
						color: #f3e8a1;
						font-size: R(46);

						.font {
							position: absolute;
							left: R(20);
							top: R(10);
							font-size: R(20);
							color: #000;
						}
					}
				}

				font-size: R(26);

				.todayNewAddList {
					padding: R(15) R(70) R(15) R(10);
				}
			}
		}

		.team {}
	}

	.statistical {
		background: #ffffff;
		border-radius: R(10);
		margin: R(25) R(25);

		.title {
			padding: R(25);
			font-size: R(30);

			.yuan {
				display: inline-block;
				width: R(16);
				height: R(16);
				background: #4286f5;
				border-radius: 50%;
				margin-right: R(10);
			}
		}

		.pai-list {
			.c-nav {
				display: flex;
				height: R(60);
				font-size: R(26);
				font-weight: 400;
				color: #404040;
				text-align: center;
				justify-content: space-around;
				background: #e8f0f4;

				// div:nth-child(1) {
				//   width: 20%;
				// }
				// div:nth-child(2) {
				//   width: 25%;
				// }
				.div {
					width: 20%;
				}

				//   div:nth-child(3) {
				//     width: 20%;
				//     display: flex;
				//     flex-direction: column;
				//     > p {
				//       font-size: R(18);
				//       line-height: 1;
				//     }
				//   }
				// div:nth-child(4) {
				//   width: 25%;
				// }
				>div {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 20%;

					>p {}
				}
			}

			.c-item {
				margin-top: 1px;
				font-size: R(22);
				font-weight: 400;
				color: #434343;
				max-height: R(400);
				padding-bottom: R(30);
				overflow: scroll;

				.item:nth-child(even) {
					background: #fafafa !important;
				}

				.item {
					display: flex;
					justify-content: center;
					white-space: nowrap;
					height: R(48);
					align-items: center;

					span {
						text-align: center;
						width: 25%;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;

						.exchange {
							background: #f60302;
							color: #fff;
							padding: R(2) R(30);
							line-height: R(28);
							border-radius: R(20);
						}
					}

					// span:nth-child(1) {
					//   width: 20%;
					// }
					// span:nth-child(2) {
					//   width: 15%;
					// }
					// span:nth-child(3) {
					//   width: 40%;
					// }
					// span:nth-child(4) {
					//   width: 25%;
					// }
				}
			}
		}
	}

	.nodata {
		text-align: center;
		color: #999;
		padding-top: R(30);
	}
</style>
